<template>
  <div>
    <b-container fluid class="banner d-none d-sm-block"></b-container>
    <b-container fluid class="d-none d-sm-block">
      <b-row align-h="center">
        <b-col lg="11">
          <div class="content-nav">
            <a-breadcrumb separator=">">
              <a-breadcrumb-item href="/">首页</a-breadcrumb-item>
              <a-breadcrumb-item>下载APP</a-breadcrumb-item>
            </a-breadcrumb>
          </div>
        </b-col>
      </b-row>
    </b-container>
    <b-container fluid>
      <b-row align-h="center">
        <b-col lg="11">
          <div id="download-intro">
            <p class="download-intro-title">魁牛 - 自购省钱 分享赚钱</p>
            <p class="download-intro-content">
              魁牛是一家由社交驱动的精品会员电商，为用户提供美妆个护、手机数码、母婴玩具、水果生鲜等全品类精选商品。
            </p>
            <p class="download-intro-content">
              魁牛致力于通过“精选”、”性价比“供应链策略以及极具社交属性的“爆款”营销策略，聚焦商品的极致性价比，帮助千万消费者以“批发价”买到全球好货。
            </p>
          </div>
        </b-col>
      </b-row>
    </b-container>
    <b-container id="download-banner" fluid>
      <b-row align-h="center">
        <b-col lg="11">
          <b-container fluid>
            <b-row class="justify-content-center align-items-center" no-gutters>
              <b-col id="download-banner-content-wrapper" md="8">
                <p class="download-banner-title d-none d-sm-block">
                  魁牛——自购省钱 分享赚钱
                </p>
                <p class="download-banner-title d-sm-none">
                  魁牛<br />自购省钱<br />分享赚钱
                </p>
                <div
                  id="download-banner-button-qrcode"
                  class="d-flex justify-content-between"
                >
                  <div
                    id="download-banner-btn-group"
                    class="d-flex flex-column justify-content-between"
                  >
                    <b-button squared variant="outline-secondary">IOS</b-button>
                    <b-button squared variant="outline-secondary">
                      安卓
                    </b-button>
                  </div>
                  <img
                    id="download-banner-qrcode"
                    src="/images/download-qrcode.png"
                  />
                </div>
              </b-col>
              <!-- <b-col md="4" class="d-none d-md-block">
                <img
                  src="/images/download-phone.jpg"
                  style="max-width: 176px;"
                />
              </b-col> -->
            </b-row>
          </b-container>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
export default {
  layout: 'staticBanner',
};
</script>

<style lang="scss" scoped>
.banner {
  height: 330px;
  background-image: url('/images/header-bg.jpg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
</style>

<style lang="scss" scoped>
.content-nav {
  margin: 24px 12px 0px;
}
#download-intro {
  margin-top: 24px;
}
.download-intro-title {
  font-size: 20px;
  line-height: 72px;
  font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
  font-weight: 650;
  text-decoration: none;
  margin-bottom: 0px;
  text-align: center;
}
.download-intro-content {
  font-family: 'PingFangSC-Regular', 'PingFang SC';
  text-decoration: none;
  text-align: center;
  color: #333333;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  letter-spacing: normal;
  line-height: normal;
}
#download-banner {
  background-color: rgba(204, 204, 204, 1);
  overflow-y: hidden;
}
#download-banner-content-wrapper {
  height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.download-banner-title {
  font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
  font-weight: 650;
  font-style: normal;
  font-size: 36px;
  color: #fff;
  text-align: center;
  line-height: 48px;
}
// #download-banner-button-qrcode {
//   width: 300px;
// }
#download-banner-btn-group {
  button {
    width: 150px;
    height: 50px;
    background-color: rgba(255, 255, 255, 1);
    border-color: rgba(228, 228, 228, 1);
    font-size: 12px;
    color: #999999;
    line-height: 24px;
    cursor: pointer;
    @include media-breakpoint-down(xs) {
      width: 120px;
      height: 40px;
    }
  }
}
#download-banner-qrcode {
  width: 130px;
  height: 130px;
  @include media-breakpoint-down(xs) {
    width: 110px;
    height: 110px;
  }
}
</style>
